<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线上订单发货</title>
    <style>
        #selectForm{
            margin: 20px 0 0 150px;
        }

        #table{
            margin: 50px 0 0 100px;
        }

    </style>
</head>

<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<body>

<div id="app">
    <!--查询-->
    <el-form :inline="true" :model="selectData" class="demo-form-inline" id="selectForm">
        <el-form-item label="订单编号">
            <el-input v-model="selectData.transactionId"></el-input>
        </el-form-item>
        <el-form-item label="用户编号">
            <el-input v-model="selectData.userId"></el-input>
        </el-form-item>
        <el-form-item label="用户名称">
            <el-input v-model="selectData.userName"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain @click="select">查询</el-button>
        </el-form-item>
    </el-form>

    <!--采购信息表格（未入库）-->
    <el-table
            :data="tableData"
            height="500"
            border
            style="width: 85%"
            id="table">
        <el-table-column
                prop="transactionId"
                label="订单编号"
                width="140">
        </el-table-column>
        <el-table-column
                prop="User[0].userId"
                label="用户编号"
                width="140">
        </el-table-column>
        <el-table-column
                prop="User[0].userName"
                label="用户名称"
                width="140">
        </el-table-column>
        <el-table-column
                prop="User[0].userAddr"
                label="用户地址"
                width="130"
                :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column
                prop="User[0].userTel"
                label="用户电话"
                width="130">
        </el-table-column>
        <el-table-column
                prop="transactionAmount"
                label="交易金额"
                width="120">
        </el-table-column>
        <el-table-column
                prop="transactionDate"
                label="交易时间"
                width="165">
        </el-table-column>
        <el-table-column label="操作" width="160">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="send(scope.$index, scope.row)">发货</el-button>
                <el-button size="mini" type="primary" @click="detail(scope.$index, scope.row)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
        <el-table :data="saleData">
            <el-table-column property="commodityId" label="商品编号" width="150"></el-table-column>
            <el-table-column property="saleQuantity" label="销售数量" width="150"></el-table-column>
            <el-table-column property="saleAmount" label="销售金额" width="150"></el-table-column>
            <el-table-column property="saleDate" label="销售日期"></el-table-column>
        </el-table>
    </el-dialog>

</div>

<script>

    new Vue({
        el:'#app',
        data() {
            return {
                selectData:{
                    transactionId:'',
                    userId:'',
                    userName:''
                },
                tableData:[],
                rowData:[],
                saleData:[],
                dialogTableVisible:false
            }
        },
        methods:{
            select(){
                console.log("查询");
                let str = '';
                if (!this.selectData.transactionId == false || this.selectData.transactionId != '') {
                    str += '&transactionId='+this.selectData.transactionId;
                }if (!this.selectData.userId == false || this.selectData.userId != '') {
                    str += '&userId='+this.selectData.userId;
                }if (!this.selectData.userName == false || this.selectData.userName != '') {
                    str += '&userName='+this.selectData.userName;
                }
                axios.get('../sendGoods?op=select'+str).then(resp => {
                    if (resp.data.code == 200){
                        this.tableData = resp.data.data;
                    }else{
                        alert("请求失败！" + resp.data.code);
                    }
                });
            },
            async send(index, row) {
                console.log("发货");
                this.rowData = row;
                await axios.get('../sendGoods?op=send&transactionId=' + row.transactionId).then(resp => {
                    if (resp.status == 200) {
                        if (resp.data) {
                            alert("发货成功！");
                        } else {
                            alert("发货失败！");
                        }
                    }
                });
                await this.show();
            },
            detail(index,row){
                console.log("详情");
                this.rowData = row;
                axios.get('../sendGoods?op=detail&transactionId='+row.transactionId).then(resp => {
                    this.saleData = resp.data.data;
                });
                this.dialogTableVisible = true;
            },
            show: async function () {
                await axios.get('../sendGoods?op=show').then(resp => {
                    if (resp.data.code == 200) {
                        this.tableData = resp.data.data;
                    } else {
                        alert("请求失败！" + resp.data.code);
                    }
                });
            }
        },
        mounted(){
            this.show();
        }

    });

</script>

</body>
</html>